<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Star Shopping</title>
		<link rel="stylesheet" href="./styles/login.css">
		<link rel="stylesheet" href="./styles/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="./fonts/iconfont.css"/>
	</head>
	<body>
		<div class="zonggong">
			<!-- 顶部 -->
			<div class="BG">
				<div class="Top">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide"><a href="#">中国大陆全场免运费</a> | <a href="">优先选用顺丰快递</a> | <a href="">赠PICC运输保险</a> | <a
								 href="">逾百站点支持</a> 分店取货</div>
							<div class="swiper-slide"><a href="#">首次购物买￥3000即减￥100</a> | <a href="">优惠码 ： GUODAGE</a> | 了解更多</div>
						</div>
					</div>
					<span class="close">×</span>
				</div>
			</div>
			<!-- logo图标 -->
			<div class="logo">
				<a href="#" >
					
				</a>
			</div>
			<!-- 俩小图标部分 -->
			<div class="two_small">
				<a href="">
				</a>
				<a href="">
					
				</a>
			</div>
			<!-- search区域 -->
			<div class="search">
				RMB (￥) &nbsp;&nbsp;&nbsp;&nbsp;<span class="iconfont icon-location"></span>
				<div class="iconfont icon-fangdajing" id="Inp">
				<input type="text" name="" id="" value="" placeholder="搜索"/>
				</div>
			</div>
			<!-- 登录注册位置 -->
			<div class="login">
				<i>登录 </i>/ <i>注册 </i> &nbsp; <span class="iconfont icon-xin"></span> &nbsp;&nbsp;<span class="iconfont icon-Shapecopy"></span> &nbsp;&nbsp; <b>金价咨询</b>
			</div>
			<!-- 菜单list区域 -->
			<ul class="list">
				<li>重点推荐</li>
				<li>珠宝▽
				<!-- 二级菜单(平时隐藏) -->
					<div class="zhubao">
						<h6>全部珠宝</h6>
						<div class="biaoti">
							<h5>最新上架</h5>
							<h5>按佩戴</h5>
							<h5>按金属</h5>
							<h5>按宝石</h5>
							<h5>按设计</h5>
							<h5>专属定制</h5>
						</div>
						<div class="neirong">
							<nav>
								<a href="">新品</a>
								<a href="">编辑推荐</a>
								<a href="">编辑推荐推介</a>
							</nav>
							<nav>
								<a href="">手镯</a>
								<a href="">手链</a>
								<a href="">项链</a>
								<a href="">串饰</a>
								<a href="">耳饰</a>
								<a href="">金片</a>
								<a href="">吊坠</a>
								<a href="">戒指</a>
								<a href="">摆件</a>
							</nav>
							<nav>
								<a href="">黄金</a>
								<a href="">18K金</a>
								<a href="">白金</a>
							</nav>
							<nav>
								<a href="">钻石</a>
								<a href="">珍珠</a>
								<a href="">彩色宝石</a>
							</nav>
							<nav>
								<a href="">手镯</a>
								<a href="">手链</a>
								<a href="">项链</a>
								<a href="">串饰</a>
								<a href="">耳饰</a>
								<a href="">金片</a>
								<a href="">吊坠</a>
								<a href="">戒指</a>
								<a href="">摆件</a>
								<a href="">吊坠</a>
								<a href="">戒指</a>
								<a href="">摆件</a>
							</nav>
							<nav>
								<a href="">关于专属定制</a>
								<a href="">Promessa duet</a>
								<a href="">钻戒定制</a>
								<a href="">Promessa enigma</a>
							</nav>
						</div>
					<div class="pic">
						<img src="https://cdn.chowsangsang.com/eshop/cn/newweb/sub_menu_banner_ild.jpg" alt="">
					</div>
				</div>
				</li>
				<li>品牌系列▽</li>
				<li>婚嫁▽</li>
				<li>礼品▽</li>
				<li>MINTYGREEN</li>
				<li>劳力士</li>
				<li>帝舵表</li>
				<li>周生生之友</li>
				<li>服务▽</li>
			</ul>
			<!-- 吸顶菜单,平常是隐藏的 -->
			<div class="xiding">
				<div class="left">
					<a href="">
					</a>
					<a href="">
						
					</a>
				</div>
				<div class="xiding_logo">
					<img src="http://cn.chowsangsang.com/sc/img/common/logo-nav.png" alt="">
				</div>
				<ul class="xiding_list">
					<li>重点推荐</li>
					<li>珠宝▽
					<div class="xiding_erji">
						<h6>全部珠宝</h6>
						<div class="biaoti">
							<h5>最新上架</h5>
							<h5>按佩戴</h5>
							<h5>按金属</h5>
							<h5>按宝石</h5>
							<h5>按设计</h5>
							<h5>专属定制</h5>
						</div>
						<div class="neirong">
							<nav>
								<a href="">新品</a>
								<a href="">编辑推荐</a>
								<a href="">编辑推荐推介</a>
							</nav>
							<nav>
								<a href="">手镯</a>
								<a href="">手链</a>
								<a href="">项链</a>
								<a href="">串饰</a>
								<a href="">耳饰</a>
								<a href="">金片</a>
								<a href="">吊坠</a>
								<a href="">戒指</a>
								<a href="">摆件</a>
							</nav>
							<nav>
								<a href="">黄金</a>
								<a href="">18K金</a>
								<a href="">白金</a>
							</nav>
							<nav>
								<a href="">钻石</a>
								<a href="">珍珠</a>
								<a href="">彩色宝石</a>
							</nav>
							<nav>
								<a href="">手镯</a>
								<a href="">手链</a>
								<a href="">项链</a>
								<a href="">串饰</a>
								<a href="">耳饰</a>
								<a href="">金片</a>
								<a href="">吊坠</a>
								<a href="">戒指</a>
								<a href="">摆件</a>
								<a href="">吊坠</a>
								<a href="">戒指</a>
								<a href="">摆件</a>
							</nav>
							<nav>
								<a href="">关于专属定制</a>
								<a href="">Promessa duet</a>
								<a href="">钻戒定制</a>
								<a href="">Promessa enigma</a>
							</nav>
							<div class="pic">
								<img src="https://cdn.chowsangsang.com/eshop/cn/newweb/sub_menu_banner_ild.jpg" alt="">
							</div>
						</div>
					</li>
					<li>品牌系列▽</li>
					<li>婚嫁▽</li>
					<li>礼品▽</li>
					<li>MINTYGREEN</li>
					<li>劳力士</li>
					<li>帝舵表</li>
					<li>周生生之友</li>
					<li>服务▽</li>
				</ul>
				<div class="right">
					<span class="iconfont icon-xin"></span> &nbsp;&nbsp;<span class="iconfont icon-Shapecopy"></span>
				</div>
			</div>
		</div>
		<!-- 中间 -->
			<div class="waike">
				<div class="zhongjian">
					<div class="pict">
						<img src="https://login.chowsangsang.com/cas/images/common/logo-site.png" alt="">
					</div>
					<div class="login_in">
						<h2 biaoti_>登入</h2>	
						<hr class="hengxian">
						<p><i>手机号码</i><b>以电邮登录 ></b></p>
						<div class="input">
							<span>
								<select>
									<option value ="+138">+138</option>
									<option value ="+52">+152</option>
									<option value ="+12">+8888</option>
									<option value ="+321">+4438</option>
									<option value ="+158">+6568</option>
									<option value ="+1888">+1788</option>
									<option value ="+188">+77738</option>
								</select>
								<input type="text" name="" id="inputUsr" value="" />
							</span>
						</div>
						<div class="input_t">
							<b>密码</b><br>
							<input type="password" name="" id="inputPassword" value="" />
							<br>
							<span><a href="">忘记密码</a> ></span>
						</div>
						<button type="button" class="in" id="in">登入</button><br>	
						<button type="button" class="zhuce" id="zhuce">立即登记</button>
					</div>
				</div>
			</div>
		<!-- bottom区域最下面 -->
		<div class="bottom">
			<nav class="one">
				<a href="">
					联络我们	
				</a>
				<a href="">
					分店位置	
				</a>
				<a href="">
					网站地图
				</a>
			</nav>
			<nav class="two">
				<a href="">
					服务
				</a>
				<a href="">
					货品配送
				</a>
				<a href="">
					退货及换货
				</a>
				<a href="">
					帮助
				</a>
			</nav>
			<nav class="three">
				<a href="">
					周生生集团
				</a>
				<a href="">
					愿景及品牌理念
				</a>
				<a href="">
					历史传承与里程碑
				</a>
				<a href="">
					珠宝品质与工艺
				</a>
				<a href="">
					加入我们
				</a>
				<a href="">
					不想写了
				</a>
			</nav>
			<nav class="four">
				<a href="">
					关注我们
				</a>
				<a href="">
					三个图标
				</a>
				<a href="">
					顾客服务:(+86) 400 830 1878
				</a>
			</nav>
			<nav class="five">
				<a href="">
					付款方式
				</a>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
			</nav>
			<div class="bottom_last">
				<div class="bottom_left">
					 ©  2019周生生集团国际有限公司
				</div>
				<div class="bottom_right">
					<a href="">
						隐私政策
					</a>
					<a href="">
						cooklie政策
					</a>
					<a href="">
						条款及细则
					</a>
					<a href="">
						粤ICP备12061196号-3
					</a>
				</div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript" src="./javascripts/libs/jquery.js"></script>
	<!-- <script type="text/javascript" src="../src/fonts/iconfont.js"></script> -->
	<script type="text/javascript" src="./javascripts/libs/swiper.min.js"></script>
	<script type="text/javascript">
		// 顶层轮播图
		var mySwiper = new Swiper('.swiper-container', {
			direction: 'horizontal',
			loop: true,
			autoplay: true,
			grabCursor: true,
			speed: 300,
			pagination: {
				el: '.swiper-pagination',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			}
		})
		// 关闭顶层栏目
		$('.close').click(function() {
			$('.Top').hide()
		})
		//二级菜单的隐藏和现实
		$('.list').children().eq(1).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(2).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(3).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(4).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(9).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().mouseleave(function(){
			$('.zhubao').stop().slideUp()
		})
		//吸顶菜单的隐藏和显示
		$(window).scroll(function(e){
			if($(window).scrollTop() >= 100){
				$('.xiding').show()
			}else{
				$('.xiding').hide()
			}
		})
		//吸顶菜单的二级导航
		$('.xiding').children().eq(1).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(2).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(3).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(4).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(9).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().mouseleave(function(){
			$('.xiding_erji').stop().slideUp()
		})
	</script>
	<script type="text/javascript">
		var btn_in = document.getElementById('in')
		var inputusr_ele = document.getElementById("inputUsr");
		var inputpwd_ele = document.getElementById("inputPassword");
		btn_in.onclick = function(){
			var inputusr_value = inputusr_ele.value;
			var inputpwd_value = inputpwd_ele.value;
			// console.log(inputusr_value,inputpwd_value);
			// 把用户输入的信息发送给后端;
			// xhr ;
			var xhr = new XMLHttpRequest();
			var url = "http://localhost/php/login.php";
			// 第一条数据 :前面是 ? 和地址字符串进行拼接;
			url += "?username="+inputusr_value;
			// 第二条数据 : 前面是第一条数据所以用 & 
			url += "&password="+inputpwd_value;
			xhr.open("GET",url);
			xhr.send(null);
			xhr.onreadystatechange = function(res){
			// 判定 1 : xhr的状态码变成4 ;
			//      2: http的状态码必须为200;
				if(xhr.readyState === 4 && xhr.status === 200){
					// console.log('6456554');
					var res = JSON.parse(xhr.responseText);
					// console.log(res);
					// 前端逻辑 => 给用户一个提示;
					if(res.state === "success"){
						location.assign("./buy.html")
					      // 错误提示稍后直接隐藏即可;
					}else if(res.state === "error"){
						alert('账号密码错误')
					}
				}
			}
		}
	</script>
	<script type="text/javascript">
		var btn_zhuce = document.getElementById('zhuce')
		var inputusr_ele = document.getElementById("inputUsr");
		var inputpwd_ele = document.getElementById("inputPassword");
		btn_zhuce.onclick = function(){
			var inputusr_value = inputusr_ele.value;
			var inputpwd_value = inputpwd_ele.value;
			var xhr = new XMLHttpRequest();
			var url = "http://localhost/php/register.php";
			// 第一条数据 :前面是 ? 和地址字符串进行拼接;
			url += "?username="+inputusr_value;
			// 第二条数据 : 前面是第一条数据所以用 & 
			url += "&password="+inputpwd_value;
			xhr.open("GET",url);
			xhr.send(null);
			xhr.onreadystatechange = function(){
			      // 判定 1 : xhr的状态码变成4 ;
			      //      2: http的状态码必须为200;
			      if(xhr.readyState === 4 && xhr.status === 200){
			            // console.log(xhr.responseText);
			            // 把json字符串转换成对象;
			            var res = JSON.parse(xhr.responseText);
			            // console.log(res);
			            // 前端逻辑 => 给用户一个提示;
			            if(res.state === "error"){
			                  alert('注册的账号已经被使用')
			            }else if(res.state === "success"){
			                  location.assign("./login.html");
			            }
			      }
			}
		}
	</script>
</html>
